<template>
<div>
    <el-form   :label-position="labelPosition"
        label-width="120px"
        class="demo-ruleForm ">
        <el-row class="container">
            <el-page-header @back="goback" content="">
            </el-page-header>
            <!-- <el-col style="margin-top: 20px;">
                <el-button>编辑</el-button>
                <el-button style="color:red;" @click="handleDelete()">删除</el-button>
            </el-col> -->
            <el-col :span="12" style="margin-top:20px;">
                <el-form-item label="产出物批号：">
                    {{crop.batch}}
                </el-form-item>
                <el-form-item label="数量：">
                     {{crop.number}}{{crop.units}}
                </el-form-item>
            </el-col>
            <el-col :span="10" style="margin-top:20px;">
                <el-form-item label="产出日期：">
                    {{crop.outTime}}
                </el-form-item>
                <el-form-item label="产出负责人：">
                     {{crop.name}}
                </el-form-item>
            </el-col>
        </el-row>
        <el-row class="container" style="margin-top:20px;">
            <h3>品种信息</h3>
            <el-col :span="7" style="margin-top:20px;">
                <el-input placeholder="品种名称/养殖批号/编号" v-model="searchName" style="width:300px;">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    <el-button slot="append" @click="handleSearch">搜索</el-button>
                </el-input>
            </el-col>
            <el-col>
                <el-table
                    :data="tableData"
                    border
                    style="margin-top:20px;"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column prop="createTime" sortable label="导入时间"></el-table-column>
                    <el-table-column prop="seedName" sortable label="品种类型"></el-table-column>
                    <el-table-column prop="batch" sortable label="养殖批号"></el-table-column>
                    <el-table-column prop="type" sortable label="编号类型"></el-table-column>
                    <el-table-column prop="code" sortable label="编号"></el-table-column>
                    <el-table-column prop="sex" sortable label="性别"></el-table-column>
                    <!-- <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="scope"> <el-button
                                type="text"
                                style="color: red;"
                                @click="handleDeleteDetail(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    :page-size="pagesize"
                    :current-page.sync="currentPage"
                    :total="total"
                    @current-change="handleCurrentChange"
                    style="margin-top:20px"
                ></el-pagination>
            </el-col>

        </el-row>

        <el-form-item class="footerFixed" label-width="0px">
            <el-button @click="goback">返回</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
import {crop_findById ,crop_findByDetailList,crop_deleteDetail,crop_delete} from '@/request/breedApi';
export default{
    data(){
        return{
            labelPosition:'right',
            crop:{},
            tableData:[],
            currentPage:1,
            total:0,
            pagesize:10,
            searchName:'',

        }
    },
    mounted() {
        this.init();
    },
    methods:{
        goback(){
            this.$router.go(-1)
        },

                // 页面一进来加载
                init() {
                     const _this = this;
                     this.id = _this.$route.query.id
                     crop_findById(this.id).then((res) => {
                       if (res.code == 200) {
                       this.crop = res.data;
                      }
                     });

                      var params = {
                         query: this.searchName,
                         page: this.currentPage,
                         breedCropId:this.id
                      };
                     crop_findByDetailList(params).then((res) => {
                       if (res.code == 200) {
                            this.tableData = res.rows;
                            this.total = res.total;
                        }
                     });


                },

        handleDeleteDetail(index,row){
           crop_deleteDetail(row.id).then((res) => {
               if (res.code == 200) {
                     this.init();
                }
             });
         },

        handleCurrentChange(val) {
            this.currentPage = val;

        },

        //搜索
        handleSearch() {
            this.currentPage = 1;
            this.init();
        },
		// 删除
        handleDelete(){
             const _this = this;
             this.id = _this.$route.query.id
             crop_delete(this.id).then((res) => {
               if (res.code == 200) {
                    this.$router.go(-1)
                }
             });
         },
    }
}
</script>

<style scoped>
.el-pagination {
    text-align: center;
}
</style>

